<!--
  智慧社区管理系统 - 安保管理主页面
  严格按照《App端编码规范权威标准声明.md》Vue组件规范实现
  
  @author Wu.Liang
  @date 2025-01-30
  @description 安保管理功能模块导航页面
-->
<template>
  <div class="security-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-title">
          <el-icon size="32" class="title-icon"><VideoCamera /></el-icon>
          <h1>安保管理</h1>
        </div>
        <div class="header-subtitle">
          <p>智慧社区安防监控与管理平台</p>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card patrol-count">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="32"><MapLocation /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.patrolCount }}</div>
                <div class="stat-label">巡逻次数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card completed">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="32"><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.completed }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card security-events">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="32"><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.securityEvents }}</div>
                <div class="stat-label">安全事件</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card pending">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon size="32"><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ statistics.pending }}</div>
                <div class="stat-label">待处理</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能管理 -->
    <div class="function-management">
      <div class="section-title">
        <h2>功能管理</h2>
      </div>
      <div class="function-grid">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToRoute">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#409EFF"><MapLocation /></el-icon>
                </div>
                <div class="function-info">
                  <h3>路线管理</h3>
                  <p>管理巡逻路线和检查点</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToPatrol">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#67C23A"><Shield /></el-icon>
                </div>
                <div class="function-info">
                  <h3>巡逻管理</h3>
                  <p>执行巡逻任务和签到</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToEvent">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#F56C6C"><Warning /></el-icon>
                </div>
                <div class="function-info">
                  <h3>事件管理</h3>
                  <p>上报和处理安全事件</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToVisitor">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#E6A23C"><User /></el-icon>
                </div>
                <div class="function-info">
                  <h3>访客管理</h3>
                  <p>访客登记和离开记录</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToStatistics">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#909399"><DataAnalysis /></el-icon>
                </div>
                <div class="function-info">
                  <h3>统计报表</h3>
                  <p>查看安保工作统计和报表</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="function-card" @click="navigateToDevice">
              <div class="function-content">
                <div class="function-icon">
                  <el-icon size="48" color="#606266"><VideoCamera /></el-icon>
                </div>
                <div class="function-info">
                  <h3>设备管理</h3>
                  <p>安防设备监控和维护</p>
                </div>
                <div class="function-arrow">
                  <el-icon size="20"><ArrowRight /></el-icon>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { VideoCamera, MapLocation, Check, Warning, Clock, Shield, User, DataAnalysis, ArrowRight } from '@element-plus/icons-vue'

// ========================= 响应式数据 =========================

const router = useRouter()

// 统计数据
const statistics = reactive({
  patrolCount: 0,
  completed: 0,
  securityEvents: 0,
  pending: 0
})

// ========================= 方法定义 =========================

/**
 * 导航到路线管理页面
 */
const navigateToRoute = () => {
  router.push('/security/route')
}

/**
 * 导航到巡逻管理页面
 */
const navigateToPatrol = () => {
  router.push('/security/patrol')
}

/**
 * 导航到事件管理页面
 */
const navigateToEvent = () => {
  router.push('/security/event')
}

/**
 * 导航到访客管理页面
 */
const navigateToVisitor = () => {
  router.push('/security/visitor')
}

/**
 * 导航到统计报表页面
 */
const navigateToStatistics = () => {
  router.push('/security/statistics')
}

/**
 * 导航到设备管理页面
 */
const navigateToDevice = () => {
  router.push('/security/device')
}

/**
 * 加载统计数据
 */
const loadStatistics = async () => {
  try {
    // 这里可以调用API获取统计数据
    // 暂时使用模拟数据
    statistics.patrolCount = 0
    statistics.completed = 0
    statistics.securityEvents = 0
    statistics.pending = 0
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// ========================= 生命周期 =========================

onMounted(() => {
  loadStatistics()
})
</script>

<style scoped lang="scss">
.security-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    .header-content {
      .header-title {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 8px;

        .title-icon {
          color: white;
        }

        h1 {
          margin: 0;
          font-size: 32px;
          font-weight: 700;
        }
      }

      .header-subtitle {
        p {
          margin: 0;
          font-size: 16px;
          opacity: 0.9;
        }
      }
    }
  }

  .statistics-cards {
    margin-bottom: 30px;

    .stat-card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 10px;

        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
        }

        .stat-info {
          flex: 1;

          .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #303133;
            line-height: 1;
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 14px;
            color: #909399;
            font-weight: 500;
          }
        }
      }

      &.patrol-count .stat-icon {
        background: linear-gradient(135deg, #409EFF 0%, #36CFC9 100%);
      }

      &.completed .stat-icon {
        background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
      }

      &.security-events .stat-icon {
        background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
      }

      &.pending .stat-icon {
        background: linear-gradient(135deg, #E6A23C 0%, #EEBE77 100%);
      }
    }
  }

  .function-management {
    .section-title {
      margin-bottom: 20px;

      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }
    }

    .function-grid {
      .function-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;
        height: 120px;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .function-content {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 20px;
          height: 100%;

          .function-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(64, 158, 255, 0.1);
          }

          .function-info {
            flex: 1;

            h3 {
              margin: 0 0 8px 0;
              font-size: 18px;
              font-weight: 600;
              color: #303133;
            }

            p {
              margin: 0;
              font-size: 14px;
              color: #909399;
              line-height: 1.4;
            }
          }

          .function-arrow {
            color: #C0C4CC;
            transition: all 0.3s ease;
          }
        }

        &:hover .function-arrow {
          color: #409EFF;
          transform: translateX(4px);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .security-management {
    padding: 15px;

    .page-header {
      padding: 30px 20px;

      .header-content .header-title h1 {
        font-size: 24px;
      }
    }

    .statistics-cards .el-col {
      margin-bottom: 15px;
    }

    .function-management .function-grid .el-col {
      margin-bottom: 15px;
    }
  }
}
</style>
